<template>
  <div class="home">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 头部 -->
      <div class="header">
        <!-- 搜索栏 -->
        <div class="top">
          <div class="left"></div>
          <!-- 右侧搜索框 -->
          <div class="right">
            <van-search shape="round" placeholder="搜索商品" @click="switchs" />
          </div>
        </div>
        <!-- tab栏 -->
        <div class="count">
          <van-tabs
            title-inactive-color="white"
            title-active-color="skyblue"
            color="white"
            background="none"
            @click="tabNav"
          >
            <van-tab :title="'首页'">
              <!-- 轮播图 -->
              <div class="top">
                <van-swipe :autoplay="2000">
                  <van-swipe-item v-for="(v, index) in images" :key="index">
                    <img :src="v.img" alt="" />
                    <!-- <img v-lazyLoad="v.img" /> -->
                  </van-swipe-item>
                </van-swipe>
              </div>
              <!-- 导航栏 -->
              <div class="cet">
                <dl v-for="(v, i) in navs" :key="i" @click="jump(v)">
                  <dt><img :src="v.img" alt="" /></dt>
                  <dd>{{ v.name }}</dd>
                </dl>
              </div>
              <!-- 优惠券组件 -->
              <Coupon></Coupon>
              <!-- 超值爆款 -->
              <div class="faddishs">
                <div class="box1">
                  <div class="side"><h2>超值爆款</h2></div>
                  <div class="offside">美好生活由此开始</div>
                </div>
                <div class="box2">
                  <dl v-for="(v, i) in faddishs" :key="i">
                    <dt><img :src="v.img" alt="" /></dt>
                    <dd>
                      <h3>{{ v.title }}</h3>
                    </dd>
                    <dd>{{ v.title_name }}</dd>
                    <dd>
                      <div class="box3">
                        <h3>{{ v.go }}<van-icon name="arrow" /></h3>
                      </div>
                    </dd>
                  </dl>
                </div>
              </div>
              <!-- 甄选咨询 -->
              <div class="pick">
                <img src="/img/zx.png" alt="" />
              </div>
              <!-- 主体数据 -->
              <div class="newNav">
                <van-tabs>
                  <van-tab v-for="(v, i) in faddishs" :key="i" :title="v.title">
                    <dl
                      v-for="(v, i) in newNavs"
                      :key="i"
                      @click="detail(v.id)"
                    >
                      <dt><img v-lazyLoad="v.image" alt="" /></dt>
                      <dd>{{ v.store_name }}</dd>
                      <dd>
                        <s>￥{{ v.ot_price }}</s>
                      </dd>
                      <dd style="color: red; font-size: 20px">
                        ￥{{ v.price }}
                      </dd>
                    </dl>
                  </van-tab>
                </van-tabs>
                <!-- 无线下拉渲染 -->
                <div class="down">
                  <dl v-for="(v, i) in persons" :key="i">
                    <dt><img :src="v.img" alt="" /></dt>
                    <dd>{{ v.title }}</dd>
                    <dd>
                      <s>￥{{ v.prices }}</s>
                    </dd>
                    <dd style="color: red; font-size: 20px">￥{{ v.price }}</dd>
                  </dl>
                </div>
              </div>
            </van-tab>
            <!-- tab栏渲染 -->
            <van-tab
              v-for="(v, i) in navigations"
              :key="i"
              :name="v.id"
              :title="v.cate_name"
            >
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
// 获取接口
import { navigation, newNav } from "@/api/request";
import faddish from "../../../public/json/faddish.json";
// 轮播图JSON数据
import swiper from "../../../public/json/swiper.json";
// 导航数据
import nav from "../../../public/json/nav.json";
// 链接axios
import axios from "axios";
// 连接组件
import Coupon from "@/components/coupon.vue";
// 懒加载
import lazyLoad from "../../../public/lazyLoad";

export default {
  directives: {
    lazyLoad,
  },
  data() {
    return {
      // tab栏
      navigations: [],
      // 轮播图数据
      images: [],
      // 导航栏
      navs: [],
      //超值爆款
      faddishs: [],
      //主体数据
      newNavs: [],
      // 下拉树新
      isLoading: false,
      // 无线下拉
      persons: [],
    };
  },
  created() {
    this.faddishs = faddish;
    // 轮播图JSON数据
    this.images = swiper;
    // 导航数据
    this.navs = nav;
    // tab栏数据
    navigation().then((res) => {
      this.navigations = res.data.data;
    }),
      // tab栏数据
      newNav().then((res) => {
        this.newNavs = res.data.data.list;
      });
  },
  methods: {
    // 点击tab栏传值
    tabNav(name, title) {
      this.$router.push(`/newTabs?cid=${name}&title=${title}`);
    },
    // 跳转分类页
    jump(val) {
      this.$router.push(val.path);
    },
    // 搜索框跳转
    switchs() {
      this.$router.push("/switch");
    },
    // 详情页
    detail(val) {
      this.$router.push(`/detail?id=${val} `);
    },
    // 下拉刷新
    onRefresh() {
      this.$router.go(0);
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
    // 无线下拉
    getInitialUsers() {
      // 请求数据
      axios.get("/json/down.json").then((response) => {
        this.persons.push(...response.data);
      });
    },
    scroll(person) {
      // 监听浏览器页面滚动事件
      window.onscroll = () => {
        let bottomwindow =
          document.documentElement.scrollTop + window.innerHeight ===
          document.documentElement.offsetHeight; //scrollTop滚动条的垂直位置，innerheight	返回窗口的文档显示区的高度。
        if (bottomwindow) {
          //如果滚动最底部就变为true
          axios.get("/json/down.json").then((response) => {
            this.persons.push(...response.data);
          });
        }
      };
    },
  },
  beforeMount() {
    this.getInitialUsers();
  },
  mounted() {
    this.scroll(this.person);
  },
  components: {
    Coupon,
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  //   padding: 0;
  box-sizing: border-box;
}
body::-webkit-scrollbar {
  display: none;
}
// 头部
.header {
  width: 100%;
  height: 200px;
  background: none;
  // 背景色
  background: linear-gradient(90deg, red 10%, orange 100%);
  // 头部导航栏
  .top {
    width: 100%;
    // 弹性盒
    display: flex;
    .left {
      width: 20%;
    }
    // 头部右侧布局
    .right {
      width: 80%;
      flex: 1;
      right: 0;
      .van-search {
        background: none;
      }
    }
  }
  // 主体
  .count {
    width: 100%;
    background: none;
    .van-swipe-item {
      width: 100%;
      img {
        width: 80%;
        margin-left: 10%;
        height: 150px;
        margin-top: 7%;
      }
    }
    .cet {
      width: 100%;
      dl {
        width: 25%;
        text-align: center;
        float: left;
        margin-top: 3%;
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }
    }
  }

  // 超值爆款
  .faddishs {
    width: 90%;
    margin-left: 5%;
    float: left;
    background: rgb(252, 236, 239);
    margin-top: 5%;
    border-radius: 5%;
    .box1 {
      width: 96%;
      display: flex;
      margin-left: 2%;
      margin-top: 3%;
      .side {
        color: rgb(248, 95, 95);
      }
      .offside {
        width: 46%;
        line-height: 30px;
        background: wheat;
        text-align: center;
        border-radius: 30px 0px 30px 0px;
        color: white;
        margin-left: 3%;
        background: linear-gradient(90deg, rgb(248, 95, 95) 10%, orange 100%);
      }
    }
    .box2 {
      width: 96%;
      height: 210px;
      margin-left: 2%;
      margin-top: 2%;
      dl {
        width: 48%;
        height: 90px;
        background: white;
        // text-align: center;
        float: left;
        margin-left: 1.3%;
        margin-top: 3%;
        line-height: 30px;
        border-radius: 7%;
        dt {
          width: 35%;
          text-align: center;
          height: 80%;
          margin-top: 5%;
          float: right;
          img {
            width: 100%;
            height: 100%;
          }
          margin-right: 3%;
        }

        dd {
          width: 65%;
          margin-left: 2%;
        }

        .box3 {
          width: 65%;
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: white;
          border: none;
          border-radius: 50px;
          background: linear-gradient(
            90deg,
            rgb(149, 209, 239) 10%,
            rgb(29, 129, 196) 100%
          );
          .van-icon {
            background: white;
            border-radius: 50%;
            color: aqua;
            text-align: center;
          }
        }
      }
    }
  }
  .pick {
    float: left;
    margin-top: 3%;
    width: 100%;
    img {
      width: 100%;
    }
  }
  //主体数据
  .newNav {
    width: 100%;
    // margin-left: 5%;
    float: left;
    background: #eee;
    margin-top: 3%;
    .van-tab__pane {
      width: 100%;
      dl {
        width: 47%;
        background: white;
        border-radius: 5%;
        margin-top: 3%;
        margin-left: 2%;
        height: 280px;
        float: left;
        dt {
          img {
            width: 100%;
            height: 200px;
            border-radius: 5% 5% 0px 0px;
          }
        }
        dd {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-left: 3%;
        }
      }
    }
  }
  .usbb {
    width: 100%;
    display: flex;
  }
}
// 无线下拉
.down {
  dl {
    width: 47%;
    background: white;
    border-radius: 5%;
    margin-top: 3%;
    margin-left: 2%;
    height: 280px;
    float: left;
    dt {
      img {
        width: 100%;
        height: 200px;
        border-radius: 5% 5% 0px 0px;
      }
    }
    dd {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 3%;
    }
  }
}
</style>
